<template>
  <div style="padding-bottom: 64px;">
    <infoCard class="mb24" />
    <div class="xq-form-wrapper p24 ">
      <titborder>
        上传数据预览
      </titborder>
      <a-alert
        type="error"
        :message="'有' + tableData.length + '条数据异常，请尽快处理'"
        show-icon
        closable
        :after-close="handleClose"
        close-text="导出错误数据"
        class="mt16 mb16 aler"
        style="background-color: #fff1f0;"
      />
      <a-spin :spinning="spinning" class="xq-form-content">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="pagination"
          :dataSource="tableData"
          :columns="columns"
          @change="handlePageChange"
        >
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <div :key="index" style="position: relative;">
              <a-popover title="数据错误" placement="right" :key="index">
                <template slot="content">
                  <p>{{ record.importFailReason }}</p>
                </template>
                <div class="triangle" v-if="col.customTitle == record.failField"></div>
              </a-popover>
              <a-tooltip placement="top" v-if="col.dataIndex == 'identity'">
                <template slot="title">
                  <span>{{ text }}</span>
                </template>
                <div class="overflowsIdentity" style="height: 22px">{{ text || "" }}</div>
              </a-tooltip>
              <a-tooltip placement="top" v-else-if="col.dataIndex == 'bankName'">
                <template slot="title">
                  <span>{{ text }}</span>
                </template>
                <div class="overflowsIdentity" style="height: 22px">{{ text || "" }}</div>
              </a-tooltip>
              <div v-else-if="col.dataIndex === 'identityBinding'">
                <span>{{ text ? "已绑定" : "未绑定" }}</span>
              </div>
              <div style="height: 22px" v-else>{{ text || "" }}</div>
            </div>
            <!-- <span v-if="['email', 'wechat', 'companyName', 'companyAddress'].includes(col.dataIndex)">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ text }}</span>
                    </template>
                    <div class="overflows">
                      {{ text }}
                    </div>
                  </a-tooltip>
                </span>
                <span v-else>
                  {{ text }}
                </span> -->
            <!-- <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" /> -->
          </template>
        </XqTable>
        <!-- <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            :page-size="pageSize"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div> -->
      </a-spin>
    </div>
    <div class="sumbit" v-if="type == 'info'">
      <a-button @click="$emit('upDate')" class="mr12">
        返回
      </a-button>
    </div>
    <div class="sumbit" v-else>
      <a-button @click="$router.go(-1)" class="mr12">
        返回
      </a-button>
      <a-button type="primary" @click="handleSubmit">
        下一步
      </a-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import infoCard from "../component/infoCard";
import titborder from "../component/titborder";
import { getRecruitInfos } from "./api";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  components: {
    infoCard,
    titborder
  },
  props: {
    arr: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      spinning: false,
      tableData: [],
      pagination: {
        pageSize: 20,
        total: 0,
        size: "default",
        current: 1,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      total: 0,
      pageNo: 1,
      pageSize: 20,
      dataJson: {}
    };
  },
  created() {
    this.tableData = this.arr;
    this.pagination.total = this.arr.length;
    this.getColumns();
  },
  methods: {
    moment,
    handlePageChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
    handleClose() {
      const token = this.$store.state.auth.token;
      const paySalaryInfo = JSON.parse(sessionStorage.getItem("paySalaryInfo"));
      axios({
        url: `/hr/api/v1/transferAccountsDetails/exportFailTransferAccountsDetail/${paySalaryInfo.type}`,
        method: "POST",
        responseType: "blob",
        data: this.arr,
        headers: {
          token: token
        }
      })
        .then(res => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "错误数据表.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          console.log("error log --> ", err);
        });
    },
    handleSubmit() {
      this.$router.replace({ name: "applyForInfo" });
    },
    getColumns() {
      const dataTypeDef = this.$route.query.dataType || sessionStorage.getItem("dataType");
      const dataType = parseInt(dataTypeDef);
      if (dataType) {
        if (dataType === 1) {
          const json = {
            customTitle: "支付宝号",
            dataIndex: "identity",
            model: "identity",
            scopedSlots: { customRender: "identity" },
            slots: { title: "xq_identity" }
          };
          this.columns.splice(-1, 0, json);
        }
        if (dataType === 3) {
          const json = {
            customTitle: "银行卡号",
            dataIndex: "identity",
            model: "identity",
            scopedSlots: { customRender: "identity" },
            slots: { title: "xq_identity" }
          };
          const json1 = {
            customTitle: "银行名称",
            dataIndex: "bankName",
            model: "bankName",
            scopedSlots: { customRender: "bankName" },
            slots: { title: "xq_bankName" }
          };
          this.columns.splice(-1, 0, json, json1);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.colw {
  width: 49%;
}
.tabs {
  height: 100px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  border: 1px solid #fff;
  overflow: hidden;
  margin-top: 24px;
  text-align: center;
  color: #3c3d43;
  display: flex;
  justify-content: space-between;
  & > div {
    width: 25%;
    height: 98px;
    padding: 26px 0;
  }
  .tabs-item-one {
    line-height: 48px;
    border-right: 1px solid #e8e8e8;
    font-size: 16px;
    font-weight: 500;
  }
  .tabs-item {
    border-right: 1px solid #e8e8e8;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    &:hover {
      background: #f4f6fa;
    }
    &:nth-child(4) {
      border-right: 0;
    }
    & > div:nth-child(1) {
      font-size: 14px;
      font-weight: 400;
      color: #a6a8b4;
      margin-bottom: 4px;
    }
  }
}
.af-primary {
  color: var(--primary) !important;
}
.af-primary-border {
  border-color: var(--primary) !important;
}
.sumbit {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #fff;
  padding-left: 188px;
  text-align: center;
  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.triangle {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 0;
  height: 0;
  // border-top: 20px solid transparent;
  border-left: 10px solid red;
  // border-right: 20px solid transparent;
  border-bottom: 10px solid transparent;
}
::v-deep.aler .ant-alert-close-text {
  color: #ff7085;
}
.overflowsIdentity {
  vertical-align: bottom;
  display: inline-block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
